<template>
    <div>
        <van-tabbar v-model="tabBarActive" @change="changeTabbar">
            <!-- <van-tabbar-item>
                <span>考勤打卡</span>
                <img slot="icon" slot-scope="props" :src="props.active ? icon.active : icon.inactive" />
            </van-tabbar-item> -->
            <van-tabbar-item icon="hospital-map">考勤打卡</van-tabbar-item>
            <van-tabbar-item icon="search">签到统计</van-tabbar-item>
            <van-tabbar-item icon="gem">外勤审批</van-tabbar-item>
            <van-tabbar-item icon="user-o">补卡申请</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    computed: {
        ...mapState(['tabBarActive'])
    },
   data(){
       return{
           icon: {
               active: 'https://img.yzcdn.cn/vant/user-active.png',
               inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
           },
           tabbarList:[
               { icon: 'hospital-map', text: '考勤打卡',path:'/main/signIn' },
               { icon: 'search', text: '签到统计', path:'/main/signInStatistics' },
               { icon: 'gem', text: '外勤审批', path:'/main/reviewWorkOrder' },
               { icon: 'user-o', text: '补卡申请', path:'/main/workAttendanceCardApply' }
           ]
       }
   },
   methods: {
       changeTabbar(page){
           this.$router.push(this.tabbarList[page]?.path)
           this.$emit('changeTabbar',page)
           this.$store.commit('updateTabBarActive', page);
       }
   },
}
</script>

<style lang="scss" scoped>
</style>
